import { Switch, Slider } from 'antd'
import React from 'react'

interface RetryEditorProps {
  value: {
    failureRetry: boolean
    retryTimes: number
    retryInterval: number
  }
  onChange: (value: any) => void
}

const RetryEditor: React.FC<RetryEditorProps> = ({ value, onChange }) => {
  return (
    <div className="mb-6 rounded-lg bg-[#fafafa] p-4 text-sm">
      <div className="flex items-center justify-between mb-6  font-bold">
        <span>失败重试</span>
        <Switch
          size="small"
          checked={value.failureRetry}
          onChange={checked => onChange({ failureRetry: checked })}
        />
      </div>
      {value.failureRetry && (
        <>
          <div className="mb-6">
            <div className="flex items-center gap-4">
              <span className="w-24">最大重试次数</span>
              <Slider
                className="flex-1"
                min={0}
                max={10}
                value={value.retryTimes}
                onChange={value => onChange({ retryTimes: value })}
              />
              <span className="text-gray-400 w-16 text-right">{value.retryTimes} 次</span>
            </div>
          </div>
          <div>
            <div className="flex items-center gap-4">
              <span className="w-24">重试间隔</span>
              <Slider
                className="flex-1"
                min={100}
                max={5000}
                value={value.retryInterval}
                onChange={value => onChange({ retryInterval: value })}
              />
              <span className="text-gray-400 w-16 text-right">{value.retryInterval} 毫秒</span>
            </div>
          </div>
        </>
      )}
    </div>
  )
}

export default RetryEditor